<template>
  <view class="box" v-if="!loading">
    <view class="center_header_box" :style="backgroundStyle">
      <view class="header-main-content">
        <image :src="userInfo.href" mode="" class="user-logo"></image>
        <view class="user-Info">
          <view class="nickname">
            {{userInfo.nickName}}
          </view>
          <view class="other-info">
            <image src="/static/image/user/auth-success.png" mode="" class="icon" v-if="userInfo.isHaveStore == 1"></image>
            <view class="auth-success" v-if="userInfo.isHaveStore == 1">
              认证成功
            </view>
            <view class="date">{{userInfo.vipSurplusDays == -1 ?  '永久有效' : userInfo.vipExpireDate}}</view>
          </view>
        </view>
      </view>
      
      <image src="/static/image/user/qrcode.png" mode="" class="qrcode" @click="gotoPages('code', '/pages/qrCode/index')"></image>
      <!-- <view class="center_renzheng1">
        <image src="/static/logo.png"></image>
        <text>认证成功</text>
      </view> -->
      <view class="center_shop" v-if="userInfo.isHaveStore != 1">
        <text @click="toCompleteShop">{{userInfo.isHaveStore != null ? storeStatus[userInfo.isHaveStore].value : '申请店铺'}}</text>
      </view>
      <view class="name_eqity">
        <text :style="rankStyle">{{userInfo.rank < 2 && userInfo.freeStore ? '免费商户' : userInfo.rankName}}</text>
        <text :style="otherStyle">升级享受更多权益</text>
      </view>
      <view class="xufei" v-if="userInfo.rank != 4" @click="toUpgrade">升级</view>
    </view>
    <view class="purchase_box">
      <view class="purcase_title_box">
        <view class="purcase_title">采购订单</view>
      </view>
      <view class="uni-flex uni-row order-wrap">
        <view class="flex-item" v-for="(i, index) in orderBtnList" :key="index" @click="gotoPages('none', i.url)">
          <image :src="i.img" class="purcase_btn_pic"></image>
          <view class="purcase_btn_title">{{i.orderTxt}}</view>
        </view>
        <view class="btn_line"></view>
      </view>
    </view>
    <view class="cut-line"></view>
    <!-- 地址，客服，账户，协议 -->
    <view class="unction_list" >
      <view class="unction_btn " v-for="(i, index) in unctionList" :key = "index" @click="unctionBtn(i.url, i.value)">
        <text class="font_div">{{i.unctionBtn}}</text>
        <view class="arrow"> </view>
      </view>
    </view>
    <common-free-store :isFreeStore="isFreeStore" @closeFreeStorePop="closeFreeStorePop"></common-free-store>
  </view>
</template>

<script>
import { PersonalCenter } from '@/service/user/user.service.js'
import commonFreeStore from '@/components/common-freeStore/index.vue'
export default{
  data(){
    return{
      loading: true,
      storeStatus: {
        '-1': {
          value: '申请店铺'
        },
        '0': {
          value: '店铺申请审核中'
        },
        '1': {
          value: '审核通过'
        },
        '2': {
          value: '店铺申请被驳回'
        },
        '3': {
          value: '店铺已下线'
        },
        '4': {
          value: '店铺申请失败'
        }
      },
      userInfo: {
        href: null, // 头像
        nickName: '', // 昵称
        rankName: '', // 等别名称
        rank: null, // 等级名称
        vipExpireDate: '', // 有效期
        status: null, // 状态
        vipSurplusDays: null, // 权益剩余天数
        isHaveStore: null, // 是否拥有店铺
        duty: null
      },
      backgroundStyle: {}, // 头部背景图展示样式
      rankStyle: {}, // VIP 名称展示样式
      otherStyle: {}, // 描述展示样式
      //采购订单
      orderBtnList:[
        {img: this.$store.state.imgBaseUrl + '/order/obligation.png', orderTxt:'待付款', url: '/pages/purchaseShop/orderList?type=0'},
        {img: this.$store.state.imgBaseUrl + '/order/send.png', orderTxt:'待发货',url: '/pages/purchaseShop/orderList?type=1'},
        {img: this.$store.state.imgBaseUrl + '/order/receiving.png', orderTxt:'待收货',url: '/pages/purchaseShop/orderList?type=3'},
        {img: this.$store.state.imgBaseUrl + '/order/afterSale.png', orderTxt:'已完成',url: '/pages/purchaseShop/orderList?type=5'},
        {img: this.$store.state.imgBaseUrl + '/order/all.png', orderTxt:'全部',url: '/pages/purchaseShop/orderList?type=-1'},
      ],
      //地址管理
      unctionList:[
        {unctionBtn:'地址管理', url: '/pages/user/address'},
        {unctionBtn:'银行卡管理', url: '/pages/user/bankCardList'},
        {unctionBtn:'联系客服', url: null, value: 'call'},
        {unctionBtn:'账户管理', url: '/pages/user/zhanghaoGuanli'},
        {unctionBtn:'我的协议', url:'/pages/user/xieyi'},
      ],
      isFreeStore: false
    }
  },
  components:{commonFreeStore},
  onShow () {
    let gradeUserInfo = uni.getStorageSync('gradeUserInfo');
    if (gradeUserInfo) {
      uni.removeStorageSync('gradeUserInfo')
    }
    this.getUserInfo();
  },
  methods: {
    closeFreeStorePop () {
      this.isFreeStore = false;
    },
    toUpgrade () {
      let params = {
        rank: this.userInfo.rank,
        href: this.userInfo.href,
        vipExpireDate: this.userInfo.vipExpireDate,
        nickName: this.userInfo.nickName
      }
      uni.setStorage({
        key: 'gradeUserInfo',
        data: params,
        success: () => {
          uni.navigateTo({
            url: '/pages/upgrade/index'
          });
        }
      })
    },
    toCompleteShop () {
      switch (this.userInfo.isHaveStore) {
      case -1:
        uni.navigateTo({
          url: '/pages/storeManage/index'
        });
        break;
      case 0:
        uni.navigateTo({
          url: '/pages/storeManage/result'
        });
        break;
      case 2:
        uni.navigateTo({
          url: '/pages/storeManage/index?status=' + 2
        });
        break;
      case 4:
        uni.navigateTo({
          url: '/pages/storeManage/result'
        });
        break;
      default:
      }
    },
    getUserInfo () { // 获取用户数据
      PersonalCenter({
      }, (res) => {
        if (res.status == 0) {
          this.userInfo = res.data;
          // this.setStyle(res.data.rank);
          this.setStyle(res.data.rank, res.data.duty);
        }
        this.loading = false;
      })
    },
    // 跳转界面
    gotoPages(type, url) {
      console.log(url)
      if (url) {
        if (type == 'code' ) {
          if (this.userInfo.rank < 2 && this.userInfo.freeStore) {
            this.isFreeStore = true;
          } else {
            uni.navigateTo({
              url: url
            });
          }
        } else {
          uni.navigateTo({
            url: url
          });
        }
      }
    },
    setStyle (rank, duty) {
      switch (rank) {
        case 1: // 达人
        if (this.userInfo.freeStore) {
          this.backgroundStyle = {
            backgroundImage: 'url("/static/image/user/daren.png")'
          };
          this.rankStyle = {
            color: '#323232'
          };
          this.otherStyle = {
            color: '#313131'
          };
        }
        break;
      case 2: // 商户
        this.backgroundStyle = {
          backgroundImage: 'url("/static/image/user/shanghu.png")'
        };
        this.rankStyle = {
          color: '#964A10'
        };
        this.otherStyle = {
          color: '#966B4B'
        };
        break;
      case 3: // 合伙人
        this.backgroundStyle = {
          backgroundImage: 'url("/static/image/user/hehuoren.png")'
        };
        this.rankStyle = {
          color: '#5A637C'
        };
        this.otherStyle = {
          color: '#7781A0'
        };
        break;
      case 4: // 大掌柜 或者 总裁
        if (!duty || duty == '0') { // 大掌柜
          this.backgroundStyle = {
            backgroundImage: 'url("/static/image/user/dazhanggui.png")'
          };
          this.rankStyle = {
            color: '#A26E12'
          };
          this.otherStyle = {
            color: '#BC9042'
          };
        } else if (duty == 1) { // 总裁
          this.userInfo.rankName = '总裁';
          this.backgroundStyle = {
            backgroundImage: 'url("/static/image/user/zongcai.png")'
          };
          this.rankStyle = {
            color: '#360D86'
          };
          this.otherStyle = {
            color: '#5B3C97'
          };
        }
        break;
      default:
      }
    },
    unctionBtn (url, value) {
      if (value == 'call') {
        uni.makePhoneCall({
          phoneNumber: '4000658899' //仅为示例
        });
      } else if (url) {
        uni.navigateTo({
          url: url
        });
      }
    } 
  }
}
</script>
<style lang="scss" scoped>
  .center_header_box {
    width: 100%;
    height: 316rpx;
    position: relative;
    background-size: 750rpx 316rpx;
    background-color: #FFFFFF;
    
    .header-main-content {
      position: absolute;
      top: 30rpx;
      left: 32rpx;
      display: flex;
      justify-content: center;
      .user-logo {
        width: 116rpx;
        height: 116rpx;
        border-radius:50%;
      }
      .user-Info {
        margin-left: 20rpx;
        margin-top: 18rpx;
        .nickname {
          font-size: 34rpx;
          color: #FFFFFF;
          font-family: PingFang-SC-Bold;
        }
        .other-info {
          display: flex;
          // justify-content: center;
          align-items: center;
          margin-top: 14rpx;
          .icon {
            width: 22rpx;
            height: 24rpx;
          }
          .auth-success {
            font-size: 26rpx;
            margin-left: 16rpx;
            margin-right: 12rpx;
            color: #F6DA99;
          }
          .date {
            font-family: PingFang-SC-Medium;
            font-size: 22rpx;
            color: #FFFFFF;
            
          }
        }
      }
    }
    
    .qrcode {
      width: 50rpx;
      height: 50rpx;
      position: absolute;
      right: 34rpx;
      top: 38rpx;
    }
  }
  /* 续费按钮 */
  .xufei{
    width: 100rpx;
    height: 40rpx;
    line-height: 40rpx;
    background: #6D3509;
    opacity: 0.46;
    border-radius: 16rpx;
    text-align: center;
    position: absolute;
    bottom: 8rpx;
    left: 324rpx;
    // margin-left:-50rpx;
    font-size: 22rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    
  }
  /* 完善店铺 */
  .center_shop {
    // width: 160rpx;
    height: 49rpx;
    line-height: 40rpx;
    background:rgba(255,255,255,.5);
    // opacity: 0.5;
    border-radius: 24rpx 0 0 24rpx;
    position: absolute;
    padding-right: 6rpx;
    right: 0;
    top: 120rpx;
  }
  .center_shop > text {
    font-size: 26rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    margin-left:27rpx;
    margin-top:-10rpx;
  }
  
  .cut-line {
    height: 22rpx;
    background-color: #FAFAFA;
  }
  
  .box {
    background-color: #FFFFFF;
    min-height: calc(100vh - 50px);
    // background: #FAFAFA;
  }

  .center_renzheng1 {
    width: 192rpx;
    height: 49rpx;
    line-height: 40rpx;
    background: #8D8D8D;
    opacity: 0.5;
    border-radius: 24rpx 0 0 24rpx;
    position: absolute;
    right: 0;
    top: 120rpx;
  }
  .center_renzheng1 image{
    width:24rpx;
    height:26rpx;
    display:inline-block;
    vertical-align: middle;
    margin-left:23rpx;
  }
  .center_renzheng1>text {
    font-size:26rpx;
    font-family:PingFang SC;
    font-weight:500;
    color:rgba(255,255,255,1);
    margin-left:20rpx; 
  }

  .name_eqity {
    // width: 357rpx;
    // height: 34rpx;
    opacity: 0.63;
    position: absolute;
    bottom: 64rpx;
    left: 80rpx;
    display: flex;
    align-items: center;
  }

  .name_eqity text:nth-child(1) {
    // width:136rpx;
    // height:34rpx;
    font-size: 34rpx;
    font-family: PingFang SC;
    font-weight:bold;
    font-style:italic;
    color:#A26E12;
    // margin-top: 27rpx;
    // margin-left: 30rpx;
    // position: absolute;
    // top: 27rpx;
    // left: 30rpx;
  }

  .name_eqity text:nth-child(2) {
    // width:192rpx;
    // height:24rpx;
    font-size:24rpx;
    font-family:PingFang SC;
    font-weight:500;
    color:#BC9042;
    // margin-top: 27rpx;
    margin-left: 48rpx;
    // position: absolute;
    // top: 38rpx;
    // left: 180rpx;
  }

  .purcase_title_box {
    width: 100%;
    background: #FFF;
  }

  .purcase_title {
    font-size: 36rpx;
    padding: 58rpx 0 0 32rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
  }
  .uni-row>view:nth-child(5)>view{
    color:#C2AC78;
  }
  .uni-row{
    overflow: hidden;
    // height: 150rpx;
    position:relative;
    background-color: #FFFFFF;
  }
  
  .order-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 132rpx;
  }

  .flex-item {
    flex: 1;
    // width: 20%;
    // padding: 40rpx 0;
    background: #FFF;
    text-align: center;
    display: flex;
    flex-flow: column;
    align-items: center;
    // float:left;
  }

  .purcase_btn_pic {
    width: 40rpx;
    height: 40rpx;
  }

  .purcase_btn_title {
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #666666;
    margin-top: 10rpx;
  }

  .btn_line {
    width: 2rpx;
    height: 38rpx;
    background: rgba(225, 225, 225, 1);
    position:absolute;
    top:60rpx;
    right:130rpx;
  }

  .whole {
    color: #C2AC78;
  }

  .unction_list {
    width: 100%;
    // height: 640rpx;
    background: #FFF;
    box-shadow: 0 5rpx 10rpx 5rpx #FAFAFA;
    // margin-top: 20rpx;
  }

  .font_div{
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(102, 102, 102, 1);
  }
  /* 三角形 */
  .arrow {
    border-right: 3rpx solid #8A8A8A;
    border-top: 3rpx solid #8A8A8A;
    height: 18rpx;
    width: 18rpx;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    /*不加这两个属性三角会比上一个略丑, 大家可以试一下*/
    border-left: 2rpx solid transparent;
    border-bottom: 2rpx solid transparent;
  }
  /* 列表 */
  .unction_btn {
    width: 718.8rpx;
    height: 97rpx;
    line-height: 97rpx;
    border-bottom: 2rpx solid #E1E1E1;
    opcity: 0.5;
    position: relative;
    margin-left:31rpx;
  }
  .unction_btn>text {
   
    position: absolute;
    left: 8rpx;
  }
  
  .unction_btn .arrow{
    position: absolute;
    right: 29rpx;
    top: 40rpx;
  }
</style>
